import React from 'react';

// 函数式组件使用 生命周期钩子
const UseStateCount = () => {

    const [count, setCount] = React.useState(0)

    const add = () => {
        setCount(count => count + 1)
    }

    // 组件加载完成执行
    React.useEffect(() => {
        console.log('组件加载完成')
        // 开启定时器
        const timer = setInterval(() => {
            console.log('自动执行')
            add()
        }, 1000)
        // 返回函数，卸载组件时执行，清除定时器
        return () => {
            clearInterval(timer)
        }
    }, [])

    // count更新执行
    React.useEffect(() => {
        console.log('count更新')
    }, [count])

    return (
        <div>
            <h2>当前点赞数={count}</h2>
            <button onClick={add}>点赞</button>
        </div>
    );
}

export default UseStateCount
